
<template>
  <div>
    <el-pagination
        v-model:current-page="pageCurrent"
        v-model:page-size="pageSize"
        :page-sizes="[5,10,15]"
        :size="size"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, ->,jumper"
        :total="articleTotal"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />

  </div>
</template>

<script setup lang="ts">
import {ref} from "vue";
import type {ComponentSize} from "element-plus";
const size = ref<ComponentSize>('large')
const pageSize = ref(5)
const pageCurrent = ref(1)

const background = ref(false)
const disabled = ref(false)
const pros = defineProps(['sendSize','sendCurrent','articleTotal'])

function handleSizeChange(val: number){
  pros.sendSize(val)
}
function handleCurrentChange(val: number){
  pros.sendCurrent(val)
}



</script>

<style scoped>

</style>